<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <VsFormItem label="Tooltip">
          <BaseOption
            :form="form"
            option="tooltip"
            :widget-instance-id="widgetInstanceId"
            :config="config"
          />
        </VsFormItem>
        <BaseOption :form="form" option="componentStyle" @change="changeColorVal" />
        <VsFormItem :label="$demoi18n('panel.adapt.adaptiveScheme')" contWidth="100%">
          <DynamicAdaptation
            :form="form"
            :config="config"
            :unit-name="$demoi18n('panel.adapt.cell')"
            :dyn-options="dynOptions"
            :show-width-adjust-option="true"
            :show-height-adjust-option="false"
            :setting-options="settingOptions"
            :widget-instance-id="chartId"
          />
        </VsFormItem>
        <VsFormItem v-if="hasProp('defaultEmitEvent')" :label="$demoi18n('table.defaultEvent')">
          <el-button type="primary" class="btn-sure" size="default" @click="openDefaultEvent">
            {{ $demoi18n('table.defaultEventSetting') }}
          </el-button>
          <el-tooltip
            class="item"
            :effect="xvueTheme"
            :content="$demoi18n('table.defaultEventSettingTip')"
            placement="top-start"
          >
            <el-button
              :link="true"
              type="primary"
              :style="{ marginLeft: '5px' }"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-button>
          </el-tooltip>
        </VsFormItem>
        <OptionCollapse>
          <el-collapse-item
            v-if="name===`config_${xvueNameSpace_}single_header_page_table`"
            :title="$demoi18n('word.rowColumnSetting')"
            name="rowColumnSetting"
          >
            <el-tabs v-model="activeRowColumnSetting">
              <el-tab-pane :label="$demoi18n('word.rowColumnTab')" name="rowColumnTab">
                <VsFormItem
                  v-if="hasProp('tranRowColumn')"
                  :label="$demoi18n('panel.label.tranRowColumn')"
                  prop="typeSetting"
                  required
                >
                  <el-radio-group
                    v-model="form.typeSetting"
                    size="default"
                    :fill="activeColorRadio"
                    @change="handleTypeSetting"
                  >
                    <el-radio label="vertical">{{ $demoi18n('panel.option.verticalTable') }}</el-radio>
                    <el-radio label="horizontal">{{ $demoi18n('panel.option.horizontalTable') }}</el-radio>
                  </el-radio-group>
                </VsFormItem>
                <VsFormItem
                  v-show="form.typeSetting === 'vertical' && hasProp('showTableHeader')"
                  :label="$demoi18n('panel.label.showTableHeader')"
                >
                  <el-switch v-model="form.hasHeader"></el-switch>
                </VsFormItem>
                <VsFormItem
                  v-show="form.typeSetting === 'horizontal' && hasProp('showTableColumnHeader')"
                  :label="$demoi18n('panel.label.showTableColumnHeader')"
                >
                  <el-switch v-model="form.hasColumnHeader"></el-switch>
                </VsFormItem>
                <VsFormItem
                  v-show="form.typeSetting === 'vertical' && hasProp('tableHeaderFilter')"
                  :label="$demoi18n('panel.label.tableHeaderFilter')"
                >
                  <el-switch
                    v-model="form.headerFilter"
                    :disabled="!form.hasHeader"
                  ></el-switch>
                </VsFormItem>
                <VsFormItem
                  v-show="form.typeSetting === 'vertical' && hasProp('tableHeaderSort')"
                  :label="$demoi18n('panel.label.tableHeaderSort')"
                >
                  <el-switch
                    v-model="form.headerSort"
                    :disabled="!form.hasHeader"
                  ></el-switch>
                  <el-tooltip
                    class="item"
                    :effect="xvueTheme"
                    :content="$demoi18n('panel.tip.tableSortTip')"
                    placement="top-start"
                  >
                    <el-button
                      :link="true"
                      type="primary"
                      :style="{ marginLeft: '5px' }"
                    >
                      <el-icon><InfoFilled /></el-icon>
                    </el-button>
                  </el-tooltip>
                </VsFormItem>
              </el-tab-pane>
              <el-tab-pane :label="$demoi18n('word.rowTab')" name="rowTab">
                <VsFormItem
                  v-if="hasProp('threshold')"
                  :label="$demoi18n('word.threshold')"
                >
                  <el-button
                    type="primary"
                    class="btn-sure"
                    size="default"
                    @click="openThreshod"
                  >
                    {{ $demoi18n('btn.thresholdSetting') }}
                  </el-button>
                </VsFormItem>
                <VsFormItem v-if="hasProp('extension')" :label="$demoi18n('word.extension')">
                  <el-button type="primary" class="btn-sure" size="default" @click="openExtension">
                    {{ $demoi18n('btn.extensionSetting') }}
                  </el-button>
                  <el-tooltip
                    class="item"
                    :effect="xvueTheme"
                    :content="$demoi18n('panel.tip.tableExtensionTip')"
                    placement="top-start"
                  >
                    <el-button
                      :link="true"
                      type="primary"
                      :style="{ marginLeft: '5px' }"
                    >
                      <el-icon><InfoFilled /></el-icon>
                    </el-button>
                  </el-tooltip>
                </VsFormItem>
              </el-tab-pane>
              <el-tab-pane :label="$demoi18n('word.cloumnTab')" name="cloumnTab">
                <ColumnSetting v-model="form.columnSetList" :field-list="fieldList" :form="form" />
              </el-tab-pane>
            </el-tabs>
          </el-collapse-item>
          <el-collapse-item
            v-if="name!==`config_${xvueNameSpace_}single_header_page_table`"
            :title="$demoi18n('word.cloumnTab')"
            name="cloumnTab"
          >
            <ColumnSetting v-model="form.columnSetList" :field-list="fieldList" :form="form" />
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('word.pageSizeSetting')"
            name="pageSizeSetting"
          >
            <VsFormItem
              v-show="form.typeSetting === 'vertical'"
              :label="$demoi18n('panel.label.showColumnTotal')"
            >
              <el-switch v-model="form.isSummary"></el-switch>
            </VsFormItem>
            <VsFormItem
              v-if="form.isSummary"
              :label="$demoi18n('panel.totalDecimal')"
              :rules="genRulesByKey('groupIcon.totalDecimal')"
              class="range-content"
            >
              <Range
                v-model:value="form.totalDecimal"
                :min="0"
                :max="10"
                type="input"
              />
            </VsFormItem>
            <VsFormItem :label="$demoi18n('panel.label.showPagination')" :helptip="paginationTip">
              <el-switch v-model="form.isPagination"></el-switch>
            </VsFormItem>
            <VsFormItem :label="$demoi18n('panel.label.showThousandth')">
              <el-switch v-model="form.isThousandSeparator"></el-switch>
            </VsFormItem>
            <VsFormItem
              v-if="hasProp('tableCheckBox')"
              :label="$demoi18n('panel.label.tableCheckBox')"
              label-width="85px"
            >
              <el-switch v-model="form.tableCheckBox"></el-switch>
            </VsFormItem>
            <BaseOption :form="form" option="defaultPageSize" :min="1" :precision="0" />
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('word.componentsSetting')"
            name="cssStyle.name"
          >
            <BaseOption
              :form="form"
              option="padding.top"
            />
            <BaseOption
              :form="form"
              option="padding.bottom"
            />
            <BaseOption
              :form="form"
              option="padding.left"
            />
            <BaseOption
              :form="form"
              option="padding.right"
            />
            <VsFormItem
              class="inner"
              :label="$demoi18n('panel.label.tableBorder')"
              prop="table.border"
              :rules="genRulesByKey('table.border')"
            ><el-radio-group
              v-model="form.table.border"
              class="icon-radio-group"
            >
              <el-radio
                v-for="(item, index) in icon.borderStyle"
                :key="index"
                :label="item.value"
                border
              >
                <img
                  :src="item.img"
                  :alt="item.key"
                />
              </el-radio>
            </el-radio-group>
            </VsFormItem>
            <VsFormItem
              :label="$demoi18n('panel.label.tableBorderColor')"
              prop="table.borderColor"
              required
            >
              <ColorPicker v-model:value="form.table.borderColor" />
            </VsFormItem>
            <VsFormItem
              :label="$demoi18n('panel.label.componentColor')"
              prop="table.backgroundColor"
              required
            >
              <ColorPicker
                v-model:value="form.table.backgroundColor"
                show-alpha
              />
            </VsFormItem>
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <BaseOption
              :form="form"
              option="title"
            />
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
          <!-- 表格纵表显示表头，其余正常 -->
          <el-collapse-item
            v-show="form.typeSetting === 'vertical'"
            :title="$demoi18n('panel.label.headerStyle')"
            name="headerStyle"
          >
            <BaseOption
              :form="form"
              option="cssStyle.headerStyle"
              :df-css-style-attrs="dfCssStyleAttrs.headerStyle"
            />
            <VsFormItem
              v-if="hasProp('firstColumnTitle')"
              :label="$demoi18n('panel.label.firstColumnTitle')"
            >
              <el-input
                v-model="form.firstColumnTitle"
                :placeholder="$demoi18n('placeholder.plsEnterFirlsColumnTitle')"
                size="default"
                style="width:unset;"
              ></el-input>
            </VsFormItem>
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('panel.label.contentStyle')"
            name="contentStyle"
          >
            <BaseOption
              v-if="hasProp('contentExtra')"
              :form="form"
              option="cssStyle.contentExtraStyle"
              :df-css-style-attrs="dfCssStyleAttrs.contentExtraStyle"
            />
            <BaseOption
              :form="form"
              option="cssStyle.contentStyle"
              :df-css-style-attrs="dfCssStyleAttrs.contentStyle"
            />
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('panel.label.footerStyle')"
            name="footerStyle"
          >
            <BaseOption
              :form="form"
              option="cssStyle.footerStyle"
              :df-css-style-attrs="dfCssStyleAttrs.footerStyle"
            />
          </el-collapse-item>
          <el-collapse-item
            v-if="hasProp('btnSet')"
            :title="$demoi18n('panel.label.btnStyle')"
          >
            <el-tabs
              v-model="activeName"
              class="panel-tabs"
            >
              <el-tab-pane
                :label="$demoi18n('view.table.export')"
                name="first"
              >
                <SeriesBtn
                  :form="form"
                  :active="activeName"
                />
                <BaseOption
                  :form="form"
                  option="cssStyle.exportBtnStyle"
                  :df-css-style-attrs="dfCssStyleAttrs.exportBtnStyle"
                />
              </el-tab-pane>
              <el-tab-pane
                :label="$demoi18n('view.table.checkExport')"
                name="second"
              >
                <SeriesBtn
                  :form="form"
                  :active="activeName"
                />
                <span :class="`info-btn ${xvueTheme}-info-btn`">
                  <el-icon><InfoFilled /></el-icon>
                  {{ $demoi18n('label.infoBtnTip') }}
                </span>
                <BaseOption
                  :form="form"
                  option="cssStyle.checkBtnStyle"
                  :df-css-style-attrs="dfCssStyleAttrs.checkBtnStyle"
                />
              </el-tab-pane>
            </el-tabs>
          </el-collapse-item>
          <BaseOption
            :form="form"
            option="noDataPromptSetting"
          />
        </OptionCollapse>
        <AdvanceSet
          v-if="hasProp('advancedSetting')"
          :form="form"
        ></AdvanceSet>
      </el-form>
    </div>
    <ThresholdSetting
      ref="thresholdSetting"
      :form="form"
      :config="config"
      :active-color-switch="activeColorSwitch"
      :active-color-radio="activeColorRadio"
      :name-list="pageTableNameList"
      :field-list="fieldList"
      :table-data="tableData"
      @save="handleThresholdSave"
    />
    <ExtensionSetting
      ref="extensionSetting"
      :form="form"
      :config="config"
      :active-color-switch="activeColorSwitch"
      :active-color-radio="activeColorRadio"
      :name-list="pageTableNameList"
      :field-list="fieldList"
      @save="handleExtensionSave"
    />
    <EmitEventSetting
      ref="emitEventSetting"
      :form="form"
      :config="config"
      :name-list="pageTableNameList"
      :field-list="fieldList"
      :table-data="tableData"
      :active-color-switch="activeColorSwitch"
      :active-color-radio="activeColorRadio"
      @save="handleEmitEventSave"
    ></EmitEventSetting>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script lang="jsx">
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import DynamicAdaptation from '@/components/common/dynamic-adaptation/dynamic-adaptation.vue';
import EmitEventSetting from '@/components/common/emitEventSetting/index';
import ExtensionSetting from '@/components/common/extension-setting/extension-setting-table';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import Range from '@/components/common/range/range';
import ThresholdSetting from '@/components/common/threshold-setting/threshold-setting-table';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { clone, isEmptyObject, isUndefinedNull, objHas } from '@/utils/util';
import { mapState } from 'vuex';
import AdvanceSet from '../common/advance-setting/advance-setting.vue';
import BaseOption from '../common/base-option/base-option';
import icon from '../common/table-icon/icon-config';
import ColumnSetting from './ColumnSetting.vue';
import dfCssStyleAttrs from './cssStyle-default.js';
import panelsConf from './props-default.js';
import SeriesBtn from './series-btn.vue';

export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
    Range,
    OptionCollapse,
    DynamicAdaptation,
    PanelLabelOverflowTooltip,
    ColorPicker,
    ThresholdSetting,
    ExtensionSetting,
    EmitEventSetting,
    AdvanceSet,
    SeriesBtn,
    ColumnSetting,
  },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      xvueNameSpace_: process.env.xvueNameSpace_,
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      icon,
      isLoading: false,
      activeItemTab: 'title',
      form: {},
      tip: this.$demoi18n('panelProperty.table.columnWidthTip'),
      dfCssStyleAttrs: {},
      dynOptions: ['settingType'],
      settingOptions: [
        {
          label: this.$demoi18n('panel.adapt.fullyAdaptive'),
          value: '0',
        },
        {
          label: this.$demoi18n('panel.adapt.highlyAdaptive'),
          value: '1',
        },
        {
          label: this.$demoi18n('panel.adapt.widthAdaptation'),
          value: '2',
        },
        {
          label: this.$demoi18n('panel.adapt.customization'),
          value: '3',
        },
      ],
      chartId: '',
      activeName: 'first',
      activeRowColumnSetting: 'rowColumnTab',
    };
  },
  computed: {
    ...mapState({
      panelApiData: state => state.VisualComponentsModule.panelApiData,
    }),
    pageTableNameList() {
      const arr = this.panelApiData;
      return Array.from(new Set(arr));
    },
    nameList() {
      const arr = this.panelApiData.map(n => n.column);
      return Array.from(new Set(arr));
    },
    isCrosstab() {
      const list = [`config_${process.env.xvueNameSpace_}page_table_crosstab`];
      return list.includes(this.config.propertyPannelName);
    },
    isMeasurementTable() {
      const list = [`config_${process.env.xvueNameSpace_}dimension_measurement_table`];
      return list.includes(this.config.propertyPannelName);
    },
    fieldList() {
      let arr = [];
      const { tableData } = this.panelConfig.data;
      if (this.isCrosstab) {
        (this.panelApiData || []).forEach(({ row, column })=>{
          arr.push(column);
        });
      } else if (this.isMeasurementTable) {
        tableData?.forEach(node=>{
          // 有字段类型的是维度
          if (!isUndefinedNull(node.field) && node.fieldType) {
            arr.push(node.field);
          }
        });
        this.panelApiData?.forEach(({ column })=>{
          arr.push(column);
        });
      } else {
        arr = tableData?.map(n => {
          if (!isUndefinedNull(n.field)) {
            return n.field;
          }
          return null;
        });
      }
      return Array.from(new Set(arr));
    },
    tableData() {
      const { tableData } = this.panelConfig.data;
      return tableData;
    },
    paginationTip() {
      if (this.config.propertyPannelName === `config_${process.env.xvueNameSpace_}dimension_measurement_table`) {
        return this.$demoi18n('page-table.showPaginationTip');
      }
      return '';
    },
  },
  watch: {
    'form.table.backgroundColor'(color, oldColor) {
      if (!oldColor) {
        return;
      }
      const titleCss = this.form.cssStyle.title;
      if (titleCss) {
        titleCss.backgroundColor = color;
      }
    },
  },
  created() {
    // 读取配置
    if (this.config) {
      this.form = clone(this.config.config.property);
      if (this.form.columnWidth) {
        if (this.form.columnWidth.length === 0) {
          this.form.columnWidth = [{ name: this.$demoi18n('word.firstColumn'), width: 100, hiddenOptions: true }];
        } else {
          this.form.columnWidth[0] &&
            this.form.columnWidth[0]['name'] &&
            (this.form.columnWidth[0]['name'] = this.$demoi18n('word.firstColumn'));
        }
      }
      this.initThreshold();
      this.initDfCssStyleAttrs();

      // ?
      this.name = clone(this.config.propertyPannelName);
      if (this.hasProp('btnSet')) {
        this.initForm();
      }
    }

    this.chartId = `${this.widgetInstanceId}_01`;
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    handleTypeSetting(val) {
      if (val === 'horizontal') {
        this.form.isSummary = false;
        this.form.hasHeader = false;
      }
    },
    initDfCssStyleAttrs() {
      const initPadding = {
        top: 40,
        left: 50,
        bottom: 40,
        right: 50,
      };
      this.form.padding = this.form.padding || initPadding;
      if (!this.form.table.border) {
        this.form.table = {
          border: 'full',
          borderColor: this.getValByCompStl('#E8EAEC', '#1a3f60', '#393939'),
          backgroundColor: this.getValByCompStl('#ffffff', '#0D263A', '#232323'),
        };
      }

      this.form = JSON.parse(JSON.stringify(this.form));
      this.dfCssStyleAttrs = dfCssStyleAttrs;
    },
    changeColorVal() {
      this.form.table = {
        ...this.form.table,
        borderColor: this.getValByCompStl('#E8EAEC', '#1a3f60', '#393939'),
        backgroundColor: this.getValByCompStl('#ffffff', '#0D263A', '#232323'),
      };
      const { headerStyle, contentStyle, footerStyle, exportBtnStyle, checkBtnStyle } = this.form.cssStyle;
      headerStyle.backgroundColor = this.getValByCompStl('#EEF3F5', '#193A57', '#393939');
      headerStyle.color = this.getValByCompStl('#A6A7A7', '#8BB4D0', '#eee');
      contentStyle.backgroundColor = this.getValByCompStl('#ffffff', '#0D263A', '#232323');
      contentStyle.color = this.getValByCompStl('#606266', '#ffffff', '#eee');
      footerStyle.backgroundColor = this.getValByCompStl('#EEF3F5', '#193A57', '#393939');
      footerStyle.color = this.getValByCompStl('#A6A7A7', '#8BB4D0', '#eee');
      if (checkBtnStyle) {
        checkBtnStyle.backgroundColor = this.getValByCompStl('#409EFF', '#187e91', '#187e91');
        checkBtnStyle.color = '#ffffff';
      }
      if (exportBtnStyle) {
        exportBtnStyle.backgroundColor = this.getValByCompStl('#409EFF', '#187e91', '#187e91');
        exportBtnStyle.color = '#ffffff';
      }

      this.initTitleColor();
      this.initDataPercentageColor();
    },
    initDataPercentageColor() {
      const { tableData } = this.panelConfig.data;
      tableData.forEach(data => {
        if (data.fieldType === 'percentage' && !isEmptyObject(data.style)) {
          // 如果是百分比类型 根据主题色初始化进度条颜色
          data.style.color = this.getValByCompStl('#00aaff', '#00f0ff', '#00f0ff');
        }
      });
    },
    initThreshold() {
      if (!this.form.threshold || this.form.threshold.length === 0) {
        this.form.threshold = [
          {
            field: '',
            type: 'number',
            min: 0,
            max: 0,
            text: '',
            textList: [],
            color: '',
            isEntireRow: false,
          },
        ];
      } else {
        this.form.threshold.forEach(thred => {
          if (!objHas(thred, 'isEntireRow')) {
            thred.isEntireRow = true;
          }
        });
      }
    },
    openThreshod() {
      if (this.$refs.thresholdSetting) {
        this.$refs.thresholdSetting.openDialog();
      }
    },
    handleThresholdSave(thresholdForm) {
      const { isThreshold, thresholdData } = thresholdForm;
      this.form = {
        ...this.form,
        isThreshold,
        threshold: thresholdData,
      };
    },

    // 组件配置面板是否出现某属性配置菜单
    hasProp(key) {
      const configName = JSON.parse(JSON.stringify(this.config.propertyPannelName));
      let conf = panelsConf[configName] || {};
      if (this.panelsConf) {
        conf = { ...conf, ...this.panelsConf };
      }
      return conf[key];
    },
    openExtension() {
      if (!this.$refs.extensionSetting) {
        return;
      }
      this.$refs.extensionSetting.openDialog();
    },
    openDefaultEvent() {
      if (!this.$refs.emitEventSetting) {
        return;
      }
      this.$refs.emitEventSetting.openDialog();
    },
    handleExtensionSave(extensionForm) {
      const { extensionData } = extensionForm;
      this.form.extension = extensionData;
    },
    handleEmitEventSave(eventForm) {
      this.form.emitEvent = eventForm;
    },
    renderTableHeader({ column }) {
      return (
        <el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
          <span>{column.label}</span>
        </el-tooltip>
      );
    },
    initForm() {
      this.form = {
        exportBtnDist: [
          { label: 'topDistance', value: 0 },
          { label: 'bottomDistance', value: 10 },
          { label: 'leftDistance', value: 20 },
          { label: 'rightDistance', value: 0 },
        ],
        exportBtnSize: [
          {
            size: { label: 'btnWidth', value: 80 },
            units: [{ label: 'px', value: 'px' }, { label: '%', value: '%' }],
            unit: 'px',
          },
          {
            size: { label: 'btnHeight', value: 28 },
            units: [{ label: 'px', value: 'px' }, { label: '%', value: '%' }],
            unit: 'px',
          },
        ],
        checkBtnDist: [
          { label: 'topDistance', value: 0 },
          { label: 'bottomDistance', value: 10 },
          { label: 'leftDistance', value: 20 },
          { label: 'rightDistance', value: 0 },
        ],
        checkBtnSize: [
          {
            size: { label: 'btnWidth', value: 80 },
            units: [{ label: 'px', value: 'px' }, { label: '%', value: '%' }],
            unit: 'px',
          },
          {
            size: { label: 'btnHeight', value: 28 },
            units: [{ label: 'px', value: 'px' }, { label: '%', value: '%' }],
            unit: 'px',
          },
        ],
        ...this.form,
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import '../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      padding: 0 10px;

      :deep(.el-form-item) {
        margin-bottom: 0;
        .el-form-item__content {
          display: flex;
          min-height: 40px;
          align-items: center;
        }
      }
      .inner {
        justify-content: flex-start;
        .label {
          text-align: right;
          width: 73px;
          margin-right: 12px;
          flex-shrink: 0;
        }
        .icon-radio-group {
          :deep(.el-radio) {
            padding: 0;
            border-radius: 0;
            height: auto;
            margin-right: 10px;
            .el-radio__input {
              display: none;
            }
            .el-radio__label {
              padding-left: 0;
              height: 24px;
              img {
                height: 20px;
                width: 24px;
              }
            }
          }
        }
      }
      :deep(.panel-tabs.el-tabs) {
        .el-tabs__content {
          overflow: hidden !important;
          position: relative !important;
        }
        .el-tabs__active-bar {
          left: 0;
        }
        .info-btn {
          margin-left: 5%;
          .el-icon {
            color: #ffce84;
            margin-right: 2px;
          }
        }
        .dark-info-btn {
          color: #98cae6;
        }
        .light-info-btn {
          color: #606266;
        }
      }
    }
  }
}
</style>

<style lang="less" scoped>
@import './panel-property.less';
</style>
